<template>
  <div id="ContentMange">
    <Card shadow>
      <Row>
          <Col span="8">
            类型 
            <Select v-model="status" class="_search">
                <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Col>
          <Col span="8">
            地区
            <Input v-model="address" placeholder="如：市+区" class="_search" clearable/>
          </Col>
          <Col span="8" class="_searchBtn">
            <Button type="primary" shape="circle" icon="ios-search" @click="ToSearch">查询</Button>
          </Col>
      </Row>
      <Divider />
      <Row class="_searchBtn">
        <Button type="dashed" @click="ToAdd">新增</Button>
        <Button type="dashed" @click="ToDelete" class="ml10">删除</Button>
      </Row>
      <Table width="100%" border :columns="columns" :data="Content" class="mt20"></Table>
    </Card>
    <Page :total="100" show-elevator show-total class="mt20"/>
  </div>
</template>
<script>
export default {
  name:'ContentManage',
  data(){
    return{
      statusList: [
          {
              value: null,
              label: '全部'
          },
          {
              value: '0',
              label: '景点'
          },
          {
              value: '1',
              label: '美食'
          },
          {
              value: '2',
              label: '交通'
          },
      ],
      status: '',
      address: '',
      //数据表格
      columns: [
          {
              type: 'selection',
              width: 60,
              align: 'center',
              fixed: 'left',
          },
          {
              title: '标题',
              key: 'name',
          },
          {
              title: 'Age',
              key: 'age',
          },
          {
              title: 'Province',
              key: 'province',
          },
          {
              title: 'City',
              key: 'city',
          },
          {
              title: 'Address',
              key: 'address',
          },
          {
              title: 'Postcode',
              key: 'zip',
          },
          {
              title: '操作',
              key: 'action',
              fixed: 'right',
              width: 65,
              render: (h, params) => {
                  return h('div', [
                      h('Button', {
                          props: {
                              type: 'text',
                              size: 'small'
                          }
                      }, '编辑')
                  ]);
              }
          }
      ],
      Content: [
          {
              name: 'John Brown',
              age: 18,
              address: 'New York No. 1 Lake Park',
              province: 'America',
              city: 'New York',
              zip: 100000
          },
          {
              name: 'Jim Green',
              age: 24,
              address: 'Washington, D.C. No. 1 Lake Park',
              province: 'America',
              city: 'Washington, D.C.',
              zip: 100000
          },
          {
              name: 'Joe Black',
              age: 30,
              address: 'Sydney No. 1 Lake Park',
              province: 'Australian',
              city: 'Sydney',
              zip: 100000
          },
          {
              name: 'Jon Snow',
              age: 26,
              address: 'Ottawa No. 2 Lake Park',
              province: 'Canada',
              city: 'Ottawa',
              zip: 100000
          }
      ]
 
    }
  },
  methods:{
    //查询
    ToSearch(){
      
    },
     //新增
    ToAdd(){

    },
     //删除
    ToDelete(){

    }
  }
}
</script>

<style lang="less" scoped>

</style>
